<template>
  <div>
    <my-breadcrumb :items="['系统管理', '社区协议']"/>
    <div class="add">
      <el-button type="primary" @click="getHtml">提交</el-button>
    </div>
    <div id="navBar" class="navBar"></div>
    <div id="editor"></div>
  </div>
</template>

<script>
const E = require('wangeditor')
export default {
  name: 'pro',
  data () {
    return {
      content: '',
      oldValue: '',
      editor: null
    }
  },
  methods: {
    getHtml () {
      if (this.oldValue !== this.content) {
        this.axios.post('/Config/editagreement', this.qs.stringify({communitytext: this.content}))
          .then(res => {
            this.$message.success(res.data.msg)
            this.getInfo()
          })
      }
    },

    getInfo () {
      this.axios.get('/Config/getagreement')
        .then(res => {
          if (res.data.status === 1) {
            this.content = res.data.data.communitytext
            this.editor.txt.html(this.content)
            this.oldValue = res.data.data.communitytext
          }
        })
    }
  },
  mounted () {
    let _self = this
    let editor = new E('#navBar', '#editor')
    editor.customConfig.uploadImgServer = '/upload' // 图片上传路径
    editor.customConfig.showLinkImg = false // 隐藏网络图片tab
    editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024 // 设置大小
    // 图片上传错误时提醒
    editor.customConfig.customAlert = function (info) {
      // info 是需要提示的内容
      _self.$message.error(info)
    }
    editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中
      files.forEach((item, index) => {
        _self.uploadImg(item, insert)
      })
    }
    editor.customConfig.onchange = function (html) {
      // 监控变化，同步更新到 textarea
      _self.content = html
      _self.$emit('input', _self.content)
    }
    // 菜单栏配置
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'image', // 插入图片
      'table', // 表格
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.create()
    this.editor = editor
  },
  created () {
    this.getInfo()
  }
}
</script>

<style scoped>

</style>
